<template>
  <div>
    <!-- 
    "ant-design:fullscreen-exit-outlined":"ant-design:fullscreen-outlined"
     -->
    <SvgIcon
      :iconName="
        isScreen
          ? 'ant-design:fullscreen-exit-outlined'
          : 'ant-design:fullscreen-outlined'
      "
      customClass="nav-sceen-button-size"
      @click="switchScreen"
    ></SvgIcon>
  </div>
</template>

<script lang="ts" setup>
//导入全屏插件
import screenfull from "screenfull";
const isScreen = ref(false);
const { proxy: vueInstance } = getCurrentInstance()!; //获取当前Vue的实例

function updateFullScreenStatus() {
  //查看是否是全屏
  isScreen.value = screenfull.isFullscreen;
}

//vue3的onMounted类似window.onload
onMounted(() => {
  if (screenfull.isEnabled) {
    screenfull.on("change", updateFullScreenStatus);
  } else {
    // Ignore or do something else
    vueInstance?.$message("当前浏览器不支持监听全屏事件");
  }
});

onBeforeUnmount(() => {
  if (screenfull.isEnabled) {
    screenfull.off("change", updateFullScreenStatus);
  } else {
    //proxy
    vueInstance?.$message("当前浏览器卸载全屏事件失败");
  }
});

const switchScreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
};
</script>

<style lang="scss" scoped>
.nav-sceen-button-size {
  line-height: 30px;
  height: 30px;
  width: 30px;
  margin-left: 10px;
}
</style>
